<template>
  <slide-view @side-close="handleClose">
    <flex-box v-loading="loading" mode="column" align-items="stretch" class="detail-container">
      <!-- detail-header -->
      <div class="detail-header">
        <flex-box class="t-section">
          <div class="t-name"></div>
          <img class="t-close" src="/image/close.png" @click="handleClose">
        </flex-box>
      </div>
      <!-- detail-content -->
      <div class="tabs">
        <el-tabs v-model="HrEmployeeManageName">
          <el-tab-pane label="基本信息" name="HrEmployeeManageInfo" />
          <el-tab-pane label="上架任务" name="tWmsReciptIntoLocPlanInfo" />
          <el-tab-pane label="拣货任务" name="tWmsDeliveryPickupPlanInfo" />
          <el-tab-pane label="工资信息" name="accountingApInfo" />
        </el-tabs>
      </div>
      <div id="follow-log-content" class="t-loading-content">
        <keep-alive>
          <component :is="tabName" :id="id" :detail="detail" :employeeManage="detail" />
        </keep-alive>
      </div>
    </flex-box>

  </slide-view>

</template>

<script>
import DetailMixin from '@/mixins/Detail'
import HrEmployeeManageApi from '@/api/basic/HrEmployeeManageApi'
import HrEmployeeManageInfo from './HrEmployeeManageInfo'
import tWmsReciptIntoLocPlanInfo from './tWmsReciptIntoLocPlanInfo'
import tWmsDeliveryPickupPlanInfo from './tWmsDeliveryPickupPlanInfo'
import accountingApInfo from './accountingApInfo'

 export default {
   name: 'HrEmployeeManageView',
   components: {
     HrEmployeeManageInfo,
     tWmsReciptIntoLocPlanInfo,
     tWmsDeliveryPickupPlanInfo,
     accountingApInfo
   },
   mixins: [DetailMixin],
   data() {
     return {
       HrEmployeeManageName: 'HrEmployeeManageInfo'
     }
   },
   computed: {
    tabName() {
      if (this.HrEmployeeManageName === 'HrEmployeeManageInfo') {
        return 'HrEmployeeManageInfo'
      }
      if (this.HrEmployeeManageName === 'tWmsReciptIntoLocPlanInfo') {
        return 'tWmsReciptIntoLocPlanInfo'
      }
      if (this.HrEmployeeManageName === 'tWmsDeliveryPickupPlanInfo') {
        return 'tWmsDeliveryPickupPlanInfo'
      }
      if (this.HrEmployeeManageName === 'accountingApInfo') {
        return 'accountingApInfo'
      }
      return ''
    }
   },
   mounted() {
       this.setApi(HrEmployeeManageApi)
       if (this.id) {
         this.getDetail()
       }
   },
   methods: {
     handleTypeClick(type) {

     }
   }
 }
</script>

<style lang="scss" scoped>
.el-tabs ::v-deep .el-tabs__nav-wrap::after {
  display: none !important;
}

.el-tabs ::v-deep .el-tabs__header {
  background-color: #F5F6F9;
  padding: 0 17px;
  margin: 0 0 15px !important;
}

.el-tabs ::v-deep .el-tabs__item {
  font-size: 13px !important;
  height: 40px !important;
  line-height: 40px !important;
}

</style>
